<template>
  <div class="employment-industry-five">
    <echarts-temp :options="options"></echarts-temp>
  </div>
</template>
<script>
export default {
  name: 'EmploymentIndustryFive',

  data() {
    return {
      options: {}
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      // 制定配置项和数据
      this.options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          confine: true
        },
        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab'],
        legend: {
          // 距离底部
          bottom: '5%',
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          // 修改图例组件的文字为12px
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12'
          }
        },
        series: [
          {
            name: '年龄分布',
            type: 'pie',
            // 设置饼图在容器中的位置
            center: ['50%', '35%'],
            // 修改内圆半径和外圆半径为 半分比是相对于容器宽度来说的，第一个参数时内圆半径，第二个是外圆半径
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false, // 不显示标签文字
              position: 'center'
            },
            labelLine: {
              show: false // 不显示连接线
            },
            data: [
              { value: 1, name: '0岁以下' },
              { value: 4, name: '20-29岁' },
              { value: 2, name: '30-39岁' },
              { value: 2, name: '40-49岁' },
              { value: 1, name: '50岁以上' }
            ]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.employment-industry-five {
  height: 100%;
  height: 100%;
}
</style>
